.invoice-env {
  padding: @default-padding/2 0;
  &:extend(.clearfix all);

  @media print {
    padding: 0;
  }

  .invoice-header {
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: @base-margin;
    &:extend(.clearfix all);

    .invoice-logo {
      float: left;

      .logo {
        display: block;
        margin-bottom: @base-margin;
      }

      ul {

        li {
          color: @main-text-color;
          font-size: @font-size-base + 1;

          strong {
            color: darken(@main-text-color, 15%);
          }

          + li {
            margin-top: 2px;
          }
        }
      }
    }

    .invoice-options {
      float: right;
      width: 180px;
    }

    @media screen and (max-width: @screen-xs) {

      .invoice-logo,
      .invoice-options {
        float: none;
      }

      .invoice-options {
        width: auto;
        margin-bottom: @default-padding;
      }
    }
  }

  .invoice-details {
    padding-top: @default-padding;
    padding-bottom: @base-padding;
    &:extend(.clearfix all);

    .invoice-client-info,
    .invoice-payment-info {
      font-size: @font-size-base + 1;
      .box-sizing(border-box);
      &:extend(.clearfix all);

      > strong {
        display: block;
        margin-bottom: @base-padding/2;
        color: darken(@main-text-color, 20%);
      }

      strong {
        color: darken(@main-text-color, 15%);
      }
    }

    .invoice-client-info {
      float: left;
      width: 60%;

      ul {
        float: left;
        margin-right: @base-margin;
      }

      @media print {
        width: 50%;
      }
    }

    .invoice-payment-info {
      float: right;
      width: 30%;

      @media print {
        width: 50%;
        text-align: right;
      }
    }

    @media screen and (max-width: @screen-xs) {

      .invoice-client-info,
      .invoice-payment-info {
        float: none;
        width: 100%;
      }

      .invoice-payment-info {
        margin-top: @default-padding/2;
      }
    }
  }

  .table {
    margin-top: @default-padding/2;
    margin-bottom: @default-padding/2;
  }

  .invoice-totals {
    margin-top: @default-padding;
    &:extend(.clearfix all);

    .invoice-bill-info {
      float: left;
      padding-left: @default-padding/2;
    }

    .invoice-subtotals-totals {
      float: right;
      text-align: right;
      padding-right: @default-padding/2;

      span {
        display: block;

        strong {
          color: darken(@main-text-color, 15%);
          display: inline-block;
          min-width: 50px;
        }
      }

      hr {
        margin: @base-padding - 2 0;
      }
    }

    @media screen and (max-width: @screen-xs) {

      .invoice-bill-info,
      .invoice-subtotals-totals {
        float: none;
        //text-align: left;
        padding: 0;
      }

      .invoice-subtotals-totals {
        margin-bottom: @default-padding;
      }
    }

    @media print {

      .invoice-bill-info,
      .invoice-subtotals-totals {
        padding: 0;
      }
    }
  }
}